/*
 * @Author: tomystery 
 * @Date: 2018-07-13 14:47:26 
 * @Last Modified by: t
 * @Last Modified time: 2018-07-13 16:51:13
 * @path:src/page/product/category/add.jsx
 */

import React from 'react';
import { Link } from 'react-router-dom';

import PageTitle from 'component/page-title/index.jsx';
import MUtil from 'util/mm.jsx';
import Product from 'service/product-service.jsx';


const _mm = new MUtil();
const _product = new Product();
class productAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            categoryList: [],
            categoryId: 0,
            categoryName:''
        }
    }

    //加载出所有的列表
    componentDidMount() {
        _product.getProductCategoryList(0).then(res => {
            this.setState({
                categoryList: res
            });
        }, errMsg => {
            this.setState({
                categoryList: []
            });
            _mm.errTips(errMsg);
        });
    }

    //选择分类
    onSelectCatergory(e) {
        this.setState({
            categoryId: e.target.value
        })
    }


    //输入值
    onInputLine(e) {
        let target = e.target;
        this.setState({
            [target.name]: target.value
        })
    }

    //提交表单
    onSubmitForm() {
        if(!(this.state.categoryName).trim()){
            _mm.errTips('请输入品类名称！')
        }else{
            _product.addCategory({
                parentId:this.state.categoryId,
                categoryName:this.state.categoryName

            }).then(res=>{
                _mm.successTips(res);
                this.props.history.push('/product-category/index')
            },errMsg=>{
                _mm.errTips('品类添加失败！')
            })
            
        }

    }




    render() {

        return (
            <div id='page-wrapper'>

                <div className='row'>
                    <div className='col-md-12'>
                        <PageTitle title="品类列表" />
                    </div>
                </div>
                <div className='row'>
                    <div className='col-md-12'>
                        <div className="form-horizontal">
                            <div className="form-group">
                                <label className="col-md-2 control-label">所属品类</label>
                                <div className="col-md-5">
                                    <select name="parentId" className="form-control" onChange={(e) => this.onSelectCatergory(e)}>
                                        <option value="0">根品类/</option>
                                        {this.state.categoryList.map((category, index) => {
                                            return (
                                                <option value={category.id} key={index}>根品类/{category.name}</option>
                                            )
                                        })}
                                    </select>
                                </div>
                            </div>
                            <div className="form-group">
                                <label className="col-md-2 control-label">品类名称</label>
                                <div className="col-md-5">
                                    <input type="text" className="form-control" placeholder="请输入品类名称" name="categoryName" onInput={(e) => this.onInputLine(e)} />
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-md-offset-2 col-md-10">
                                    <button type="submit" className="btn btn-primary" onClick={() => this.onSubmitForm()}>提交</button>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>


            </div>
        )
    }
}

export default productAdd 